import React, { Component } from 'react'
import Logo from '../../component/logo/logo.js'
import {List, InputItem, WingBlank, WhiteSpace, Button, Radio} from 'antd-mobile'
import { connect } from 'react-redux'
import { regisger } from '../../redux/user.redux'
import { Redirect } from 'react-router-dom'
import  imoocFrom  from '../../component/imooc-from/imooc-from'
@connect(
  state=>state.user,
  {regisger}
)
@imoocFrom
class Register extends Component{
  constructor(props){
    super(props)

    this.handleRegister = this.handleRegister.bind(this)
  }
  componentDidMount(){
    this.props.handleChage('type','genius')
  }
  handleRegister(){
    this.props.regisger(this.props.state)
  }
  render(){
    const RadioItem = Radio.RadioItem
    return (
      <div>
        {this.props.redirectTo?<Redirect to={this.props.redirectTo} />:null}
        <Logo />
        <WingBlank>
          <List>
            {this.props.msg?<p className='error-msg'>{this.props.msg}</p>:null}
            <InputItem onChange={v=>this.props.handleChage('user',v)}>用户名</InputItem>
            <InputItem type='password' onChange={v=>this.props.handleChage('pwd',v)}>密码</InputItem>
            <InputItem type='password' onChange={v=>this.props.handleChage('repeatpwd',v)}>确认密码</InputItem>
            <WhiteSpace />
            <RadioItem 
            checked ={this.props.state.type=='genius'}
            onChange={()=>this.props.handleChage('type','genius')}
            >
              牛人
            </RadioItem>
            <RadioItem 
            checked ={this.props.state.type=='boss'}
            onChange={()=>this.props.handleChage('type','boss')}
            >
              boss
            </RadioItem>
            <WhiteSpace /> <WhiteSpace />
            <Button type='primary' onClick={this.handleRegister}>注册</Button>
          </List>
        </WingBlank>
      </div>
    )
  }
}

export default Register